<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper class="home-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="banner in bannerList" :key="banner.id">
				<image :src="banner.src" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 页面导航 -->
		<view class="home-nav">
			<view class="nav-item" v-for="cate in CateList" :key="cate.src">
				<image :src="cate.src"></image>
				<text>{{cate.name}}</text>
			</view>
		</view>
		<!-- 课程内容 -->
		<view class="home-subject">
			<v-card title='热门课程' more='更多课程' type='course'>
				<view class="subject-item-list">
					<v-card-item v-for="item,index in courseList" :item='item' :key="index" type='course'></v-card-item>
				</view>
			</v-card>
			<v-card title='名师大伽' more='更多名师' type='teacher'>
				<view class="subject-item-list">
					<v-card-item v-for="item,index in teacherList" :item='item' :key="index" type='teacher'></v-card-item>
				</view>
			</v-card>
		</view>
		<!-- 返回顶部 -->
		<v-back-top></v-back-top>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { bannerCateList, hotCateList } from '@/common/mock/home'
	import reqHome from '@/api/home'
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	const title = ref('Hello')
	const bannerList = reactive(bannerCateList)
	const CateList = reactive(hotCateList)
	const courseList = ref([]) //课程列表数据
	const teacherList = ref([]) //教师列表数据

	// 获取主页面的数据
	const getHomeListData = async () => {
		const result = await reqHome.getHomeData() as any
		// console.log(result)
		if (result.code === 200) {
			courseList.value = result.data.courseList
			teacherList.value = result.data.teacherList
		}
	}
	
	//页面滚动时触发
	onPageScroll((e)=>{
		uni.$emit('pageScroll',e.scrollTop)
	})

	onLoad(() => {
		getHomeListData()
	})
</script>

<style lang="less">
	.home {
		.home-banner {
			width: 100%;
			height: 300upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.home-nav {
			width: 100%;
			display: flex;

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;

				image {
					width: 72rpx;
					height: 72rpx;
					padding: 20rpx 0;
				}

				text {
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.home-subject {
			padding: 10px;

			.subject-item-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
			}

			.subject-item-list:after {
				content: '';
				width: 335rpx;
			}
		}
	}
</style>